<template>
    <div class="cart">
         <div class="top"> 
         <div class="left"><span></span></div>
         <div class="center">购物车</div>
         <div class="right"><span></span></div>
         </div>

<div v-if="price">
<van-card
  :num="num"
  :price="price"
  :title="title"
  :thumb="thumb"
>
  <template #footer>
    <van-button size="mini" @click="deleteList()">删除</van-button>
  
  </template>
</van-card>
<van-submit-bar :price="price1" button-text="提交订单" @submit="onSubmit" />
    </div>
    <div class="kc" v-else>
        <span></span>
        <br>
        购物车空空如也,取逛逛吧</div>
        <div class="title"> <div class="title_text">可能你还想要</div></div>
       <div class="list">
<ul>
    <li v-for="(item,index) in list" :key="index">
<div class="cover">
    
<img :src="img+item.img+img1"> <!----> <!----></div>
<div class="info">
    <div class="rec_name"><!----> 
                           {{item.t}}
                        </div> <div class="flex_wrap">
                            <div class="price_info">
                            <div class="price">¥
                            <em>  {{item.jp/100}}</em></div> </div>
                            </div>
                            </div>
    </li>
    <li></li>
    </ul>
       </div>
    </div>
</template>

<script>
import {carte_list} from '../../api/index';
import  './toTop'
import axios from 'axios'
export default {
    data() {
        return {
           price:"" ,
           price1:"" ,
        title:"",
           thumb:"",
           num:"1",
           list:"",
           img:"https://m.360buyimg.com/mobilecms/s150x150_",
           img1:"!q70.jpg.dpg"
        }
    },
    methods:{
  deleteList(){
            this.delete
              location. reload()
        },

onSubmit(){
    var self=this
      axios.post('mail/alipay.trade.wap.pay-PHP-UTF-8/inst.php',{t:this.title,jp:this.price,img: this.thumb})
      self.$router.push('/pay')
    //   console.log(self.$router);
}
    },
    mounted() {
        // this.price=this.$store.list.jp
       this.price=this.$store.state.list.jp
       this.price1=this.$store.state.list.jp*100
       this.title=this.$store.state.list.t
       this.thumb=this.$store.state.list.img
     carte_list().then(res=>{
      
         this.list=res.data
        //   console.log(this.list);
     })
    },
    updated() {
        
    },
    deactivated() {
        
    },
}
</script>
<style  scoped>
        .cart{
        width: 10rem;
       background:rgb(247, 247, 247);
        height: 17.786667rem;
        display: block;
    }
.top{
        height: 1.2rem;
        width: 10rem;
        background: white;
        position: relative;
    }
    .left{
        width: 1.066667rem;
        height: 1.2rem;
        background: white;
       position: absolute;
       left: 0;
    }
    .left span{
 width: .533333rem;
    height: .666667rem;
    display: inline-block;
    background: url() no-repeat 50%;
    background-position:.133333rem -0.053333rem;
    background-size: contain;
        position: absolute;
    top: .373333rem;
    }
    .center{
       left: 1.066667rem;
       right: 1.066667rem;
       top: 0;
bottom: 0;
text-align: center;
line-height:1.2rem;
font-size: .48rem;
        background: white;
        position: absolute;
    }
    .right{
        width: 1.066667rem;
        height: 1.2rem;
        background: white;  
         position: absolute;right: 0;
    }
    .right span{
            display: inline-block;
    margin: .32rem .16rem .32rem .266667rem;
    width: .533333rem;
    height: .533333rem;
    background: url() no-repeat 50%;
    background-size: .533333rem;
    }
  .van-submit-bar{
       bottom: 1.386667rem;
    }
    .kc{
        padding: 1.866667rem 0 1.733333rem;
    text-align: center;
    font-size: .426667rem;
    }
    .kc span{
        display: inline-block;
    width: 90px;
    height: 90px;
    background: url(//img11.360buyimg.com/jdphoto/s180x180_jfs/t18163/292/540553659/74408/adeb7463/5a93c51cN3bb5e37b.png) no-repeat 50%;
    background-size: 90px 90px;
    display: inline-block;
    }
    .title{
            position: relative;
    margin: 15px 0;
    height: 1em;
    line-height: 1em;
    text-align: center;
    font-size: 12px;
    color: #999;
    }

.title:after {
    content: "";
    position: absolute;
    z-index: 2;
    pointer-events: none;
    background-color: #ccc;
    height: 1px;
    left: 0;
    right: 0;
    top: 0;
    left: 10px;
    right: 10px;
    top: 50%;
}
    
    .title_text{
         z-index: 3;
    position: relative;
    padding: 0 0px;
    background-color: #f7f7f7;
    width: 2.72rem;
    left: 3.36rem;
    }
    .title_text:before {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -2px;
    width: 4px;
    height: 4px;
    left: 0px;
    background-color: #ccc;
    -webkit-transform: rotate(
45deg
);

    transform: rotate(
45deg
);
}
.title_text::after{
    position: absolute;
    right: 0;
      content: "";
    top: 50%;
    margin-top: -2px;
    width: 4px;
    height: 4px;
    right: 0px;
    background-color: #ccc;
    transform: rotate(5deg)
}
.list li{

float: left;
    background: #fff;
    position: relative;
    width: 50%;
    margin-bottom: 1px;
    padding: 15px 15px 0;
    box-sizing: border-box;
    border-radius: 10px;
}
.cover{
        position: relative;
    overflow: hidden;
    padding-top: 100%;
    height: 0;
}
.cover img{
        position: absolute;
    max-width: 100%;
    max-height: 100%;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);

}
 .rec_name {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
        margin: 12px 0 4px;
    font-size: 12px;
    color: #333;
    line-height: 18px;
    height: 36px;
    -webkit-box-orient: vertical}
    .price{
            display: inline-block;
   font-size: .64rem;
    color: #e93b3d;
    margin-right: 3px;
    line-height: 20px;
    }
    
</style>